<template>
	<view class="image-list-wrapper">
		<view :style="{width: imageWidth + 'rpx', height: imageWidth + 'rpx', margin: marginNum + 'rpx' }" class="image-list-item" v-for="(item, index) in imageList" :key="index">
			<image  mode="aspectFill" @click="previewImage(index)" :src="item"></image>		
		</view>
	</view>
</template>

<script>
	export default {
		name: "MyUploader",
		components: {},
		props: {
			imageWidth: {
				type: Number,
				default: 280
			},
			value: {
				type: Array,
				default: () => []
			},		
			//默认压缩后宽度400px
			drawWidth: {
				type: Number,
				default: 300
			},
			marginNum: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				src: '',
				src1: '',
				drawHeight: null,
				//原始图片宽高
				rawWidth: null,
				rawHeight: null,
				imageList: [],
				img: {},
				fileIds: [],
				isFromFather: true
			};
		},
		watch: {
			value(newVal,oldVal) {
				console.log('从父组件传入的值',newVal)		
				if (this.isFromFather&& JSON.stringify(newVal)!= JSON.stringify(oldVal)) {
					this.downLoadFiles(newVal)
				} else {
					this.isFromFather = true
				}

			}
		},
		onReady() {

		},
		methods: {			
			previewImage(index) {
				uni.previewImage({
					urls: this.imageList,
					current: index,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {
							console.log("选中了第" + (data.tapIndex + 1) + "个按钮,第" + (data.index + 1) + "张图片");
						},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			},		
			setImages(fileIds) {
				console.log('传入', fileIds)
				this.downLoadFiles(fileIds)
			},
			downLoadFiles(fileIds) {
				let that = this
				fileIds.forEach(id => {
					console.log(id)
					this.$http.post('common/file/download', {
						id: id
					}).then(res => {
						console.log(res)
						if (res.code == 10000) {
							that.fileIds.push(id);
							that.imageList.push(res.data.fileData)
						}
					})
				})
			}
		},
	};
</script>
<style lang="less" scoped>
	.upload-wrapper {
		margin: 12rpx;
		width: 280rpx;
		height: 280rpx;
		// border: 1rpx solid #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
		
		border: 2rpx solid #DCDCDC;
		// .add {
		// 	font-size: 100rpx;
		// 	color: #ccc;
		// }
		.add {
			width: 200rpx;
			height: 200rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.image-list-wrapper {
		display: flex;
		flex-wrap: wrap;
		// 
		padding-left: 4rpx;
	    justify-content: center;
		.image-list-item {
			// margin: 12rpx;
			width: 280rpx;
			height: 280rpx;
			position: relative;
	
			image {
				// padding: 2rpx;
				// border: 1rpx solid #ccc;
				max-width: 100%;
				max-height: 100%;
			}
	
			
		}
	}
</style>
